<!DOCTYPE html>
<meta charset="UTF-8">
<title>样式</title>
<link rel="import" href="../../common/layout.html">

<style>

	body {
		display: flex;
	}

	.main {
		flex: 1;
		padding: 20px 0 0 20px;
	}

	li {
		list-style: decimal;
	}

	pre {
		margin: 0;
	}

	.sample {
		margin-top: 10px;
	}

</style>

<main>
	<h2>文本框</h2>

	<section>
		<div class="sample">
			<input type="text" placeholder="空">
			<input value="无 type">
			<input type="text" value="text">
		</div>
		<div class="sample">
			<input type="email" value="email">
			<input type="url" value="url">
			<input type="tel" value="tel">
			<input type="date" value="date">
		</div>
		<div class="sample">
			<input type="text" value="禁用" disabled>
			<input type="text" class="ng-invalid ng-dirty" value="错误">
		</div>
		<div class="sample">
			<select>
				<option value="">-- 请选择 --</option>
			</select>
			<input type="number" value="number">
		</div>
	</section>

	<h2>按钮</h2>

	<div>
		<p>说明:</p>
		<ol>
			<li>按钮样式不带 margin, 放在具体使用环境中调整</li>
			<li>样式有按颜色, 大小分的基础款 + 拼装好的常用款</li>
		</ol>
	</div>

	<section>
		<h3>基本按钮</h3>
		<pre>.btn-ok: .btn-primary + .btn-large</pre>
		<pre>.btn-cancel: .btn-normal + .btn-large</pre>

		<div class="sample">
			<button class="btn-ok">确认</button>
			<button class="btn-cancel">取消</button>
			<button class="btn-ok" disabled>确认</button>
			<button class="btn-cancel" disabled>取消</button>
			<button class="btn-ok">超过五个字了</button>
		</div>
	</section>

	<!--<section>-->
		<!--<h3>基本按钮 Small</h3>-->
		<!--<pre>.btn-ok-small: .btn-primary + .btn-base</pre>-->
		<!--<pre>.btn-cancel-small: .btn-normal + .btn-base</pre>-->

		<!--<div class="sample">-->
			<!--<button class="btn-ok-small">确认</button>-->
			<!--<button class="btn-cancel-small">取消</button>-->
			<!--<button class="btn-ok-small" disabled>确认</button>-->
			<!--<button class="btn-cancel-small" disabled>取消</button>-->
			<!--<button class="btn-ok-small">超过四个字</button>-->
		<!--</div>-->
	<!--</section>-->

	<section>
		<h3>功能性按钮</h3>
		<p>注: icon 和文字的间距, 用空格即可</p>
		<pre>.btn-function-normal: .btn-primary + .btn-large + .btn-auto-width</pre>
		<pre>.btn-function-highlight: .btn-normal + .btn-large + .btn-auto-width</pre>

		<div class="sample">
			<button class="btn-function-normal">选择图片</button>
			<button class="btn-function-normal" disabled>选择图片</button>
			<button class="btn-function-highlight">+ 新建活动</button>
			<button class="btn-function-highlight" disabled>+ 新建活动</button>
		</div>
	</section>

	<!--<section>-->
		<!--<h3>功能性按钮 Small</h3>-->
		<!--<pre>.btn-function-normal-small: .btn-primary + .btn-small + .btn-auto-width</pre>-->
		<!--<pre>.btn-function-highlight-small: .btn-normal + .btn-small + .btn-auto-width</pre>-->

		<!--<div class="sample">-->
			<!--<button class="btn-function-normal-small">关怀</button>-->
			<!--<button class="btn-function-normal-small" disabled>关怀</button>-->
			<!--<button class="btn-function-highlight-small">关怀</button>-->
			<!--<button class="btn-function-highlight-small" disabled>关怀</button>-->
		<!--</div>-->
	<!--</section>-->

	<section>
		<h3>可拼装 placeholder</h3>
		<p>按颜色:</p>
		<pre>%btn-normal, %btn-primary, %btn-text, %btn-text-primary</pre>

		<p>按大小</p>
		<pre>%btn-base, %btn-large, %btn-small, %btn-auto-width</pre>
	</section>
</main>

<script src="/components.js"></script>

